<template>
  <view class="p-h24">
    <view class="main-view m-t40 p-h24 p-b24">
      <view class="label text-700-130">自我描述</view>
      <textarea v-model="content" class="textarea" placeholder="详细描述自己一下吧(10-100字)"></textarea>
    </view>

    <view class="main-view flex m-t40 p-h24">
      <text class="p-v30 text-400-430">
        例如:\n
        Phasellus porta fermentum est et eleifend. Pellentesque dapibusfermentum tortor, non fermentum sem vehicula sit
        amet.Vivamus sed justo nisl. Nunc suscipit scelerisque ex, at mattisipsum elementum sed. Cras eget neque ut
        justo dignissimtempus. In eu mi
      </text>
    </view>

    <view class="flex-c">
      <RcButton
        :width="340"
        :top="100"
        text="保存"
        @click="onSubmit" />
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import RcButton from '@/components/button.vue'

  const isUpdate = ref(false)
  const content = ref('')

  // 重新加载上一个页面的数据
  const reloadPrePage = () => {
    const pages = getCurrentPages()
    const page = pages[pages.length - 2]
    page.$vm.$.exposed.getMyResume()
  }

  const onSubmit = () => {
    if (!validate()) return

    const data = { content: content.value }

    uni.$u.post('/user/usercontent', data).then((res) => {
      uni.showToast({ title: res.msg, icon: 'none' })

      if (res.code === 1) {
        reloadPrePage()
        uni.navigateBack()
      }
    })
  }

  const validate = () => {
    if (content.value === '') {
      uni.showToast({
        title: '请填写自我描述',
        icon: 'none',
      })
      return false
    }

    return true
  }

  onLoad((e) => {
    isUpdate.value = e?.type === 'update'

    if (isUpdate.value) {
      uni.getStorage({
        key: 'RESUME_SELF_DESC',
        success: (res) => {
          content.value = res.data
        },
      })
    }
  })
</script>

<style lang="scss">
	page {
		background-color: $page-color-4;
	}
</style>

<style lang="scss" scoped>
	.main-view {
		border-radius: 10rpx;
		background-color: $bg-color-1;

		.label {
			line-height: 112rpx;
			border-bottom: 1rpx solid $border-color-4;
		}

		.textarea {
			width: 100%;
			height: 500rpx;
			padding: 30rpx 0;
		}
	}
</style>
